【krpano】ホットスポットにマウスオーバーで文字を表示させる

ホットスポットや 特定の画像の上にマウスオーバーさせた時に文字を表示させる方法。
ホットスポットに「次へ」とか「クリックしてください」コントローラーに「右」とか「左」とかガイドのためのテキストを入れたりする際に使える。

【使用するファイル】
xmlファイル
マウスオーバーさせる ポイントになる画像 sample.jpg

【基本コード1】マウスオーバーさせる画像の設定
以下のコードをxmlファイル内に記述します

<plugin name="id_name"
url="logo.jpg"
align="center"
x="10"
 y="10"
 onhover="showtext(表示させる文字,style_name);"
 />

解説

<plugin name="id_name" // 画像のID
url="logo.jpg" // 画像のパス
align="center" // 画像の基本表示位置
x="10" // 基本の位置から横位置の移動距離
 y="10 "// 基本の位置から縦位置の移動距離
 onhover="showtext(表示させる文字,style_name);" //マウスオーバーした時に文字を表示させるためのアクション
 />

【基本コード2】表示させる文字の設定
以下のコードをxmlファイル内に記述します

<textstyle name="style_name"
background="false"
backgroundcolor="0xFFFFFF"
border="false"
bordercolor="0x000000"
fontsize="20"
textcolor="0xFFFFFF" effect="glow(0xFFFFFF,1,3,3);glow(0x000000,1,5,5);dropshadow(3,45,0x000000,2,0.6);"
 fadetime="0.2"
  />

解説

<textstyle name="style_name"
background="false" //背景の有無
backgroundcolor="0xFFFFFF"
border="false" //枠線の有無
bordercolor="0x000000"
fontsize="20"//フォントサイズ 
textcolor="0xFFFFFF" //文字色
effect="glow(0xFFFFFF,1,3,3);glow(0x000000,1,5,5);dropshadow(3,45,0x000000,2,0.6);" //文字への効果
fadetime="0.2" //マウスを外してから文字が消えるまでの時間 秒
  />

解説

<krpano version="1.16" >

<include url="skin/defaultskin.xml" />

<view hlookat="0" vlookat="0" maxpixelzoom="1.0" fovmax="150" limitview="auto" />

<preview url="mukogawa1.tiles/preview.jpg" />

<image type="CUBE" multires="true" tilesize="512" progressive="false">
<level tiledimagewidth="4776" tiledimageheight="4776">
<cube url="mukogawa1.tiles/mres_%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="2388" tiledimageheight="2388">
<cube url="mukogawa1.tiles/mres_%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="1194" tiledimageheight="1194">
<cube url="mukogawa1.tiles/mres_%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="597" tiledimageheight="597">
<cube url="mukogawa1.tiles/mres_%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
</level>
<mobile>
<cube url="mukogawa1.tiles/mobile_%s.jpg" />
</mobile>
</image>

<plugin name="id_name"
url="logo.png"
align="center"
x="10"
y="10"
onhover="showtext(表示させる文字,style_name);"
/>

<textstyle name="style_name"
background="false"
backgroundcolor="0xFFFFFF"
border="false"
bordercolor="0x000000"
fontsize="20"
textcolor="0xFFFFFF" effect="glow(0xFFFFFF,1,3,3);glow(0x000000,1,5,5);dropshadow(3,45,0x000000,2,0.6);"
fadetime="1.5"
/>
</krpano>